<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<jsp:include page="../frame/header.jsp"></jsp:include>

<title>添加商户信息</title>
<style>
.top-pills .nav-tabs{
	font-weight: bold;
}
.list-group{
	width:300px;
}
.checkbox{
	width:268px;
}

.table-div .table{
	margin-top:8px;
}
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">系统管理</a> <span class="divider">/</span></li>
					<li><a href="#">优惠券</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-edit"></i> 添加商户信息
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<form id="myform" class="form-horizontal" method="post" action="<c:url value="/admin/coupon/seller" />">
						<fieldset>
							<div class="top-pills">
								<div class="tabbable">
									<!-- Only required for left/right tabs -->
									<ul class="nav nav-tabs">
										<li class="active"><a href="#tab1" data-toggle="tab">基本信息</a></li>
										<li><a href="#tab2" data-toggle="tab">地址信息</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="tab1">
											<input type="hidden" name="sellerId"
												value="${seller.sellerId }">
											<div class="control-group">
												<label class="control-label" for="sortId">分类</label>
												<div class="controls">
													<select id="sortId" name="sortId" class="input-xlarge">
														<c:forEach var="sort" items="${sorts }">
															<option value="${sort.menuId }"
																<c:if test='${sort.menuId == seller.sortId }'>selected</c:if>>${sort.menuName
																}</option>
														</c:forEach>
													</select>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="name">名称</label>
												<div class="controls">
													<input class="input-xlarge focused" name="name"
														check-type="required" required-message="请输入名称" id="name"
														type="text" value="${seller.name }" maxlength="100">
												</div>
											</div>

											<div class="control-group">
												<label class="control-label" for="link">联系方式</label>
												<div class="controls">
													<input class="input-xlarge" id="link" name="link"
														type="text" value="${seller.link }">
												</div>
											</div>

											<div class="control-group">
												<label class="control-label" for="fileInput">缩略图</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="userHeader" type="file"> <input type="button"
														value="upload" onclick="return ajaxFileUpload();">
												</div>

											</div>
											<div class="control-group">
												<div class="controls">
													<img id="loading" class="hide"
														src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
													<img id="picture"
														src='<c:url value="/resources/fileupload/${seller.thumbnail }"/>'
														height="100"> <input type="hidden" name="thumbnail"
														id="thumbnail" value="${seller.thumbnail }">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="description_mc">商户描述</label>
												<div class="controls">
													<textarea id="description_mc" name="description_mc" rows="4"
														class="input-xlarge">${seller.description_mc }</textarea>
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tab2">
											<div class="control-group">
												<label class="control-label" for="postCode">邮编</label>
												<div class="controls">
													<input class="input-xlarge" id="postCode" name="postCode"
														type="text" value="" check_type="required" required-message="请输入邮编">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="tel">电话</label>
												<div class="controls">
													<input class="input-xlarge" id="tel" name="tel"
														type="text" value="">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="address">地址</label>
												<div class="controls">
													<textarea id="address" name="address" rows="2"
														class="input-xlarge" check_type="required" required-message="请输入地址"></textarea>
												</div>
											</div>
											<div class="table-div">
												<button id="addBtn" type="button" class="btn ">
													<i class="icon-plus"></i>添加
												</button>
												<input type="hidden" name="addresses" id="addresses">
												<div class="table-responsive">
													<table id="glassInfo"
														class="table table-striped table-bordered ">
														<thead>
															<tr>
																<th>邮编</th>
																<th>电话</th>
																<th>地址</th>
																<th width="30">操作</th>
															</tr>
														</thead>
														<tbody>

														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="form-actions">
								<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
								<button id="cancelBtn" type="button" class="btn">返回</button>
							</div>
						</fieldset>
					</form>

				</div>
			</div>
			<!--/span-->

		</div>
	</div>
	<!--/row-->
</body>

<jsp:include page="../frame/scripts.jsp"></jsp:include>
<script src="<c:url value="/resources/js/common.js" />"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#cancelBtn').click(function(){
		window.location.href = '<c:url value="/admin/coupon/seller" />';	
	})
	
	$("#myform").validation();
	
	//保存
	$('#saveBtn').click(function(){
		if($("#sortId").val() == null){
			alert("请首先创建优惠券分类！");
			return;
		}
		var infos = [];
		//玻璃详细信息
		$("#glassInfo tbody tr").each(function(i,item){
			if($(item) != null && $(item).length > 0){
				var info = new Object();
				info.postCode = $(item).find("td:eq(0)").html();
				info.tel = $(item).find("td:eq(1)").html();
				info.address = $(item).find("td:eq(2)").html();
				infos.push(info);
			}
		})
		var str = JSON.stringify(infos);
		$("#addresses").val(str);
		$("#myform").submit();
	})
	
	var addresses = '${seller.addresses}';
	if(null != addresses && addresses.length > 0){
		addresses = JSON.parse(addresses); 
		$(addresses).each(function(i,address){
			//添加表格
			var str = '<tr>';
			str += '<td >'+address.postCode+'</td>';
			str += '<td >'+address.tel+'</td>';
			str += '<td >'+address.address+'</td>';
			str += '<td align="center"><a href="javascript:void(0)" onclick="del(this)"><i class="icon-minus"></i></a></td>';
			str += '</tr>'
			
			$("#glassInfo tbody").append(str);
		});
	}
	
	$("#addBtn").click(function(){
		var error = false;
		$('#postCode,#address').each(function() {
             var el = $(this);
             var valid = (el.attr('check_type')==undefined)?null:el.attr('check_type').split(' ');
             if (valid != null && valid.length > 0) {
            	 el.focus(function() { // 获取焦点时
	                 var controls = el.parents('.controls'), controlGroup = el.parents('.control-group'), errorEl = controls.children('.help-block, .help-inline');
	                 if (errorEl.length > 0) {
	                     var help = controls.data('help-message');
	                     if (help == undefined) {
	                         errorEl.remove();
	                     } else {
	                         errorEl.text(help);
	                     }
	                 }
	                 controlGroup.attr('class','control-group');
	             });

	             el.blur(function() { // 失去焦点时
	                 validateField(this, valid);
	             });
	             
	             var err = !validateField(this, valid);
	             if(err)
	            	 error = err;
             }
             
             
         });
		if(error){
			return;
		}
		//添加表格
		var str = '<tr>';
		str += '<td >'+$("#postCode").val()+'</td>';
		str += '<td >'+$("#tel").val()+'</td>';
		str += '<td >'+$("#address").val().trim()+'</td>';
		str += '<td ><a href="javascript:void(0)" onclick="del(this)"><i class="icon-minus"></i></a></td>';
		str += '</tr>'
		
		$("#glassInfo tbody").append(str);
		
		//清空输入内容
		$("#postCode").val('');
		$("#tel").val('');
		$("#address").val('');
	})
})


//上传图片
function ajaxFileUpload(){
	
	$("#loading").ajaxStart(function(){
		//开始上传文件时显示一个图片
		$(this).show();
	}).ajaxComplete(function(){
		//文件上传完成将图片隐藏起来
		$(this).hide();
	});
	
	$.ajaxFileUpload({
		url:'<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
		secureuri:false,//一般设置为false
		fileElementId:'userHeader',//文件上传空间的id属性  <input type="file" id="file" name="file" />
		dataType: 'JSON',//返回值类型 一般设置为json(大写)
		success: function (data, status){
			var image = DOMAIN + '/resources/fileupload/'+$(data).html();
			$("#picture").attr('src',image).show();
			$("input[name='thumbnail']").val($(data).html());
		},
		error: function (data, status, e){
			alert(e);
		}	
	})
	
	return false;
}

function del(obj){
	$(obj).parent().parent().remove();
}
</script>